<script setup lang="jsx">

import {AddIcon, SearchIcon} from "tdesign-icons-vue-next";
import {computed, reactive, ref, onMounted} from 'vue';
import {useAdministratorStore} from "@/stores/administrator.js";
import {MessagePlugin} from "tdesign-vue-next";
import {
  createActivity, deleteActivityApi,
  deleteAdministratorApi,
  listActivityAdministrator,
  listAdministrator, pageAllFeedback, pageAllGradeAdmin, reviewActivity, updateActivity
} from "@/api/administrator.js";
import {ErrorCircleFilledIcon, CheckCircleFilledIcon, CloseCircleFilledIcon} from 'tdesign-icons-vue-next';
import {getCommentCount, pageAllGrade} from "@/api/activity.js";

const administratorStore = useAdministratorStore()

// 搜索 --------------------------------------------------------------------------

const searchValue = ref('');
const onClear = () => {
  console.log('clear');
  search()
};
const onBlur = () => {
  console.log('blur');
  if (searchValue.value === '') {
    search()
  }
};

const search = async () => {
  const res = await listActivityAdministrator(administratorStore, searchValue.value, '', '', '', '', 1, '');
  data.value = res.data.data
  total.value = data.value.length
  pagination.total = total.value
}


// 表格数据 ------------------------------------------------------------------------
const data = ref([])
const total = ref(0)

const stripe = ref(true);
const bordered = ref(false);
const hover = ref(true);
const size = ref('medium');
const showHeader = ref(true);

const refreshData = async () => {

}
// 活动评价 -------------------------------------------------------------------------
const commentVisible = ref(false)
const commentList = ref([])
// 默认为1，current用来做锚点
const commentCurrent = ref(1)
const commentTotal = ref(0)
const commentPageSize = ref(6) // 单次加载数量
const commentCount = ref(0) // 首页评论数量
const rowId = ref(0)

const commentWindow = async (row) => {
  commentVisible.value = true
  if (commentList.value.length === 0 || rowId.value !== row.id) {
    commentList.value = []
    commentCurrent.value = 1;
    commentTotal.value = 0;
    commentPageSize.value = 6;
    const res = await pageAllGradeAdmin(administratorStore, commentCurrent.value, commentPageSize.value, row.id);
    commentTotal.value = res.data.data.total
    commentList.value = res.data.data.records
  }
  rowId.value = row.id
}

const asyncLoadingRadio = ref('load-more');

const loadMore = async () => {
  asyncLoadingRadio.value = 'loading';
  const res = await pageAllGrade(administratorStore, ++commentCurrent.value, commentPageSize.value, rowId.value);
  commentTotal.value = res.data.data.total
  commentList.value.push(...res.data.data.records)
  if (commentList.value.length === commentTotal.value) {
    asyncLoadingRadio.value = 'loading-custom'
  } else {
    asyncLoadingRadio.value = 'load-more';
  }
};

const asyncLoading = computed(() => {
  if (asyncLoadingRadio.value === 'loading-custom') {
    return '没有更多数据了';
  }
  return asyncLoadingRadio.value;
});
const imageUrl = 'https://tdesign.gtimg.com/site/avatar.jpg';




// -- 表格列JSX --------------------------------------------------------------------
const columns = ref([
  {colKey: 'id', title: '活动id', width: 40},
  {colKey: 'activityName', title: '活动名称', width: 70},
  {
    colKey: 'grade',
    title: '评分',
    width: 150,
    cell: (h, {row}) => (
        <div style={{display: 'flex', alignItems: 'center'}}>
          <div style={{paddingLeft: 10, paddingTop: 20, paddingRight: 20, display: 'flex'}}>
            <t-rate disabled value={row.grade} style={{paddingRight: '20px'}}/>
            {row.grade === null ? (
                <h3>暂无评分</h3>
            ) : row.grade <= 1 ? (
                <h3>差评如潮</h3>
            ) : row.grade <= 2 ? (
                <h3>多半差评</h3>
            ) : row.grade <= 3 ? (
                <h3>褒贬不一</h3>
            ) : row.grade <= 4 ? (
                <h3>多半好评</h3>
            ) : (
                <h3>好评如潮</h3>
            )}
          </div>

        </div>
    )
  },
  {
    colKey: 'comment',
    title: '评价/反馈',
    width: 200,
    cell: (h, {row}) => {
      return (
          <div style={{display: 'flex'}}>
            <div style={{paddingRight: '20px'}}>
              <t-button theme="success" onClick={() => commentWindow(row)}>
                评价
              </t-button>
            </div>
            <div>
              <t-button theme="primary" onClick={() => feedbackWindow(row)}>
                活动反馈
              </t-button>
            </div>
          </div>

      )
    },
  },
  // {
  //   colKey: 'feedback',
  //   title: '活动反馈',
  //   width: 200,
  //   cell: (h, {row}) => {
  //     return (
  //         <div style={{paddingLeft: '20px', paddingTop: '20px', paddingRight: '20px'}}>
  //           <t-button theme="primary" onClick={() => feedbackWindow(row)}>
  //             活动反馈
  //           </t-button>
  //         </div>
  //     )
  //   },
  // }

]);

const handleRowClick = (e) => {
  // console.log(e);
};

const pagination = {
  defaultCurrent: 1,
  defaultPageSize: 5,
  total: 0,
};

// 反馈 -----------------------------------------------------
const ellipsisState = {
  row: 2,
  expandable: true,
  collapsible: true,
};

const feedbackVisible = ref(false)
const feedbackList = ref([])
// 默认为1，current用来做锚点
const feedbackCurrent = ref(1)
const feedbackTotal = ref(0)
const feedbackPageSize = ref(6) // 单次加载数量
const feedbackCount = ref(0) // 首页评论数量
const feedbackRowId = ref(0)

const feedbackWindow = async (row) => {
  feedbackVisible.value = true
  if (feedbackList.value.length === 0 || feedbackRowId.value !== row.id) {
    feedbackList.value = []
    feedbackCurrent.value = 1;
    feedbackTotal.value = 0;
    feedbackPageSize.value = 6;
    const res = await pageAllFeedback(administratorStore, feedbackCurrent.value, feedbackPageSize.value, row.id);
    feedbackTotal.value = res.data.data.total
    feedbackList.value = res.data.data.records

  }
  feedbackRowId.value = row.id
}

const asyncLoadingRadioFeedback = ref('load-more');

const loadMoreFeedback = async () => {
  asyncLoadingRadioFeedback.value = 'loading';
  const res = await pageAllFeedback(administratorStore, ++feedbackCurrent.value, feedbackPageSize.value, feedbackRowId.value);
  feedbackTotal.value = res.data.data.total
  feedbackList.value.push(...res.data.data.records)
  if (feedbackList.value.length === feedbackTotal.value) {
    asyncLoadingRadioFeedback.value = 'loading-custom'
  } else {
    asyncLoadingRadioFeedback.value = 'load-more';
  }
};

const asyncLoadingFeedback = computed(() => {
  if (asyncLoadingRadioFeedback.value === 'loading-custom') {
    return '没有更多数据了';
  }
  return asyncLoadingRadioFeedback.value;
});


// 初始化数据 ---------------------------------------------
onMounted(async () => {
  const res = await listActivityAdministrator(administratorStore, searchValue.value, '', '', '', '', 1, '');
  data.value = res.data.data
  total.value = data.value.length
  pagination.total = total.value

})


</script>

<template>
  <t-layout style="
      height: 100%;                /* 继承父容器高度 */
    ">
    <t-header style="display: flex;               /* 启用flex布局 */
      align-items: center;         /* 垂直居中 */
      justify-content: center;     /* 水平居中 */
      padding-left: 2%;
      padding-right: 1%;
      background-color: #e5e5e5;
      width: auto;">
      <div style="display: flex; justify-content: flex-end; width: 100% ">
        <div style="padding-right: 2%">
          <t-input v-model="searchValue" placeholder="输入活动" borderless clearable @clear="onClear"
                   @blur="onBlur"></t-input>
        </div>
        <div style="padding-right: 2%">
          <t-button shape="circle" theme="primary" @click="search">
            <template #icon>
              <SearchIcon/>
            </template>
          </t-button>
        </div>
      </div>


    </t-header>
    <t-content
        style="background-color: white; width: 100%; display: flex; align-items: center; justify-content: center">
      <t-space direction="vertical" style="padding: 2%;">

        <!-- 当数据为空需要占位时，会显示 cellEmptyContent -->
        <t-table
            row-key="index"
            :data="data"
            :columns="columns"
            :stripe="stripe"
            :bordered="bordered"
            :hover="hover"
            :table-layout="'fixed'"
            :size="size"
            :pagination="pagination"
            :show-header="showHeader"
            cell-empty-content="-"
            resizable
            lazy-load
            @row-click="handleRowClick"
            @page-change="refreshData"
        >
        </t-table>
      </t-space>
    </t-content>


  </t-layout>

  <!--    评论列表-->
  <t-dialog
      width="40%"
      closeBtn
      closeOnOverlayClick
      closeOnEscKeydown
      :footer="false"
      v-model:visible="commentVisible">
    <t-list style="height: 400px" :async-loading="asyncLoading" split @load-more="loadMore" >
      <t-list-item v-for="(item, index) in commentList" :key="index">
        <t-list-item-meta :image="imageUrl" :title="item.userId" :description="item.comment"/>
      </t-list-item>
    </t-list>
  </t-dialog>

  <!--反馈窗口-->
  <t-dialog
      width="50%"
      closeBtn
      closeOnOverlayClick
      closeOnEscKeydown
      :footer="false"
      v-model:visible="feedbackVisible">
    <t-list style="height: 400px" :async-loading="asyncLoadingFeedback" split @load-more="loadMoreFeedback" >
      <t-list-item v-for="(item, index) in feedbackList" :key="index">
        <t-typography-paragraph :ellipsis="ellipsisState">{{item.textFeedback}}</t-typography-paragraph>
      </t-list-item>
    </t-list>

  </t-dialog>

</template>

<style scoped>

</style>